<!DOCTYPE html >
<html>
<head>
<title>首页</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link href="../res/css/cate.css" rel="stylesheet" type="text/css" />
<link href="../res/css/iscroll.css" rel="stylesheet" type="text/css" />
<link href="../res/css/index.css" rel="stylesheet" type="text/css" />
<script src="../res/js/iscroll.js" type="text/javascript"></script>
	<script type="text/javascript">
	var myScroll;
	function loaded() {
	myScroll = new iScroll('wrapper', {
	snap: true,
	momentum: false,
	hScrollbar: false,
	onScrollEnd: function () {
	document.querySelector('#indicator > li.active').className = '';
	document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
	}
	 }); 
	}
	document.addEventListener('DOMContentLoaded', loaded, false);
	</script>
</head>
<body>
	<script src="../res/js/jquery.min.js" type="text/javascript"></script>
	<div class="banner">
		<div id="wrapper">
			<div id="scroller">
			<ul id="thelist">
				<li><a href="javascript:void(0)"><img src="../res/images/banner1.png" /></a></li>
				<li><a href="javascript:void(0)"><img src="../res/images/banner2.png" /></a></li>
			</ul>
			</div>
		</div>
		<div id="nav">
			<ul id="indicator">
				<li class="active" ></li>
				<li ></li>
			</ul>
		</div>
	</div>
	<div class="doorService">
		<table>
			<tr>
				<td><img src="../res/images/xc.png"><h1>洗车</h1> </td>
				<td><img src="../res/images/xc2.png"><h1>洗车</h1> </td>
				<td><img src="../res/images/xc3.png"><h1>洗车</h1> </td>
				<td><img src="../res/images/xc4.png"><h1>洗车</h1> </td>
			</tr>
		</table>
	</div>
	<div class="gg">
		<img src="../res/images/gg.png"><marquee class="marquee" scrollAmount=5  direction=left>提示公告：123456789</marquee>
	</div>
	<div class="advertising">
		<img src="../res/images/tu1.png">
		<img src="../res/images/tu1.png">
		<img src="../res/images/tu1.png">
		<img src="../res/images/tu2.png">
		<img src="../res/images/tu2.png">
		<img src="../res/images/tu2.png">
	</div>
	<div class="nav">
		<table>
			<tr>
				<td> <img src="../res/images/sy.png"> <small>首页<small></td>
				<td> <img src="../res/images/daod.png"> <small>洗车<small></td>
				<td> <img src="../res/images/md.png"> <small>洗车<small></td>
				<td style="border:none;"> <img src="../res/images/wd.png"> <small>我的<small></td>
			</tr>
		</table>
	</div>
	<script>
		var count = document.getElementById("thelist").getElementsByTagName("img").length;	

		var count2 = document.getElementsByClassName("menuimg").length;
		for(i=0;i<count;i++){
		 document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";

		}
		document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";

		 setInterval(function(){
		myScroll.scrollToPage('next', 0,400,count);
		},3500 );
		window.onresize = function(){ 
		for(i=0;i<count;i++){
		document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";

		}
		 document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";
		} 
	</script>
</body>
</html>